<template>
    <div>
        <el-card>
            <el-descriptions title="个人信息" :column="2" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user-solid"></i>
                        姓名
                    </template>
                    {{ userInfo.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-male"></i>
                        性别
                    </template>
                    {{ userInfo.gender }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        账号
                    </template>
                    {{ userInfo.accountMember }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-phone"></i>
                        电话
                    </template>
                    {{ userInfo.telenumber }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-message"></i>
                        邮箱
                    </template>
                    {{ userInfo.email }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-goods"></i>
                        消费次数
                    </template>
                    {{ userInfo.buyCount }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-shopping-cart-full"></i>
                        会员等级
                    </template>
                    {{ userInfo.buyCount }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-card>
            <el-button v-if="userInfo.member === false" type="primary" size="medium" @click="authentication = true">会员认证</el-button>
            <el-button type="primary" size="medium" @click="passwordvisble = true">修改密码</el-button>
        </el-card>
        <el-dialog
            title="会员认证"
            :visible.sync="authentication"
            width="60%"
            :before-close="handleClose">
            <el-card>
                <el-form
                    :model="formData"
                    :rules="Rules"
                    ref="Form"
                    label-width="100px"
                    label-position="right">
                    <el-form-item label="姓名：" prop="name">
                        <el-input name="name"
                            v-model="formData.name"
                            placeholder="请输入姓名">
                            <span slot="prefix">
                                <i class="el-icon-user-solid color-main"></i>
                            </span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="电话：" prop="telenumber">
                        <el-input name="telenumber"
                            v-model="formData.telenumber"
                            placeholder="请输入电话">
                            <span slot="prefix">
                                <i class="el-icon-phone color-main"></i>
                            </span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="性别：" prop="gender">
                        <el-radio-group v-model="formData.gender">
                            <el-radio :label="'男'">男</el-radio>
                            <el-radio :label="'女'">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="certified">认证</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <span slot="footer" class="dialog-footer">
                <el-button @click="authentication = false">取 消</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :title="textshow"
            :visible.sync="passwordvisble"
            width="40%"
            :before-close="handleClose">
            <el-card v-if="process === 1">
                <el-form
                    :model="formData2"
                    :rules="Rules2"
                    ref="Form2"
                    label-width="110px"
                    label-position="right">
                    <el-form-item label="账号：" prop="accountMember">
                        <el-input name="accountMember"
                            disabled="true"
                            v-model="formData2.accountMember"
                            placeholder="请输入账户">
                            <span slot="prefix">
                                <i class="el-icon-user color-main"></i>
                            </span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="password">
                        <el-input name="password"
                            type="password"
                            v-model="formData2.password"
                            placeholder="请输入密码">
                            <span slot="prefix">
                                <i class="el-icon-lock color-main"></i>
                            </span>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="medium" @click="checkstep1">验证</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card v-if="process === 2">
                <el-form
                    :model="formData1"
                    :rules="Rules1"
                    ref="Form1"
                    label-width="110px"
                    label-position="right">
                    <el-form-item label="原密码：" prop="password">
                        <el-input name="password"
                            type="password"
                            v-model="formData1.password"
                            placeholder="请输入原密码">
                            <span slot="prefix">
                                <i class="el-icon-lock color-main"></i>
                            </span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="新密码：" prop="newPassword">
                        <el-input name="newPassword"
                            type="password"
                            v-model="formData1.newPassword"
                            placeholder="请输入新密码">
                            <span slot="prefix">
                                <i class="el-icon-lock color-main"></i>
                            </span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码：" prop="newpassword1">
                        <el-input name="newpassword1"
                            type="password"
                            v-model="formData1.newpassword1"
                            placeholder="请输入新密码">
                            <span slot="prefix">
                                <i class="el-icon-lock color-main"></i>
                            </span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="验证码：" prop="verifyCode">
                        <el-input name="verifyCode"
                            v-model="formData1.verifyCode"
                            placeholder="请输入邮箱验证码">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="medium" @click="check">修改</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <span slot="footer" class="dialog-footer">
                <el-button v-if="process === 2" @click="back">上一步</el-button>
                <el-button @click="back">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import qs from 'qs'
    const defautyformData = {
        accountMember: '',
        password: '',
        newPassword: '',
        newpassword1: '',
        email: '',
        verifyCode: ''
    }
    export default {
        data () {
            const validateUsername = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入或输入正确的用户名')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validatePass = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入原密码')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validateoldPassword = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入原密码')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validatenewPassword = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入新密码')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validatenewPassword1 = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入确认新密码')
                    callback(e)
                } else if (value !== this.formData1.newPassword) {
                    const e = new Error('两次密码不一致')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validateverifyCode = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入验证码')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validateName = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入姓名')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validateTelenumber = (rule, value, callback) => {
                const re = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入电话')
                    callback(e)
                } else if (!re.test(value)) {
                    const e = new Error('请输入正确电话')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validateGender = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请选择性别')
                    callback(e)
                } else {
                    callback()
                }
            }
            return {
                textshow: '请先验证身份',
                isdisabled: false,
                send: '发送',
                process: 1,
                userInfo: '',
                authentication: false,
                passwordvisble: false,
                formData: {
                    name: '',
                    telenumber: '',
                    gender: '',
                    isMember: 1
                },
                formData2: {
                    accountMember: '',
                    password: ''
                },
                formData1: {
                    accountMember: '',
                    password: '',
                    newPassword: '',
                    newpassword1: '',
                    email: '',
                    verifyCode: ''
                },
                config: {
                    theme: 'success',
                    message: ''
                },
                Rules: {
                    name: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateName
                        }
                    ],
                    telenumber: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateTelenumber
                        }
                    ],
                    gender: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateGender
                        }
                    ]
                },
                Rules1: {
                    password: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateoldPassword
                        }
                    ],
                    newPassword: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validatenewPassword
                        }
                    ],
                    newpassword1: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validatenewPassword1
                        }
                    ],
                    verifyCode: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateverifyCode
                        }
                    ]
                },
                Rules2: {
                    accountMember: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateUsername
                        }
                    ],
                    password: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validatePass
                        }
                    ]
                }
            }
        },
        created () {
            this.userInfo = JSON.parse(sessionStorage.getItem('user'))
            this.formData1.accountMember = this.userInfo.accountMember
            this.formData1.email = this.userInfo.email
            this.formData2.accountMember = this.userInfo.accountMember
        },
        methods: {
            async getUserInfo () {
                this.$http.post('/getUserInfo/', { params: { 'token': sessionStorage.getItem('token') } }).then(res => {
                    console.log(res)
                    this.formData1.accountMember = res.data.data.accountMember
                    this.formData1.email = res.data.data.email
                    this.formData2.accountMember = res.data.data.accountMember
                })
            },
            certified () {
                this.$refs.Form.validate(valid => {
                    if (valid) {
                        this.docertified()
                    } else {
                        return false
                    }
                })
                this.authentication = false
            },
            async docertified () {
                this.$http.post('/register/member', qs.stringify(this.formData)).then(res => {
                    console.log(res)
                    if (res.data === true) {
                        this.config.theme = 'success'
                        this.config.message = '认证成功'
                        this.userInfo.member = true
                        this.userInfo.name = this.formData.name
                        this.userInfo.telenumber = this.formData.telenumber
                        this.userInfo.gender = this.formData.gender
                        sessionStorage.setItem('user', JSON.stringify(this.userInfo))
                        this.getUserInfo()
                    } else {
                        this.config.theme = 'error'
                        this.config.message = '认证失败'
                    }
                    this.$bkMessage(this.config)
                })
            },
            async sendEmail () {
                this.$http.get('/modifyPassword/sendVerifyCode/', { params: { accountMember: this.formData2.accountMember, password: this.formData2.password } }).then(res => {
                    console.log(res)
                    if (res.data === true) {
                        this.config.theme = 'success'
                        this.config.message = '发送成功'
                        this.process = 2
                        this.textshow = '修改密码'
                    } else {
                        this.config.theme = 'error'
                        this.config.message = '发送失败'
                    }
                    this.$bkMessage(this.config)
                })
            },
            checkstep1 () {
                this.$refs.Form2.validate(valid => {
                    if (valid) {
                        this.sendEmail()
                    } else {
                        return false
                    }
                })
            },
            check () {
                this.$refs.Form1.validate(valid => {
                    if (valid) {
                        this.modifiy()
                    } else {
                        return false
                    }
                })
            },
            modifiy () {
                this.$http.post('/modifyPassword/', qs.stringify(this.formData1)).then(res => {
                    console.log(res)
                    if (res.data === true) {
                        this.config.theme = 'success'
                        this.config.message = '修改成功'
                        this.back()
                        this.getUserInfo()
                        this.passwordvisble = false
                    } else {
                        this.config.theme = 'error'
                        this.config.message = '修改失败'
                    }
                    this.$bkMessage(this.config)
                })
            },
            back () {
                this.process = 1
                this.textshow = '请先验证身份'
                this.formData1 = Object.assign({}, defautyformData)
            },
            handleClose () {
                //
            }
        }
    }
</script>

<style scoped>
</style>
